<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-button @click="back" icon="el-icon-arrow-left">返回</el-button>
        <span style="margin-left: 10px">新增企业</span>
      </div>
      <el-form
        :model="ruleForm"
        style="width: 800px; margin-bottom: 60px"
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="code">
          <el-input v-model="ruleForm.code" placeholder="请输入统一社会信用代码"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="linkName">
          <el-input v-model="ruleForm.linkName" placeholder="请输入企业联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入企业联系人电话"></el-input>
        </el-form-item>
        <el-form-item label="企业所在地" prop="address">
          <el-input v-model="ruleForm.address" placeholder="请输入企业所在地"></el-input>
        </el-form-item>
        <el-form-item label="开通域名" prop="isOpen">
          <el-radio v-model="ruleForm.isOpen" :label="1">是</el-radio>
          <el-radio v-model="ruleForm.isOpen" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="附件" prop="attachment">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            accept=".jpg, .png, .jpeg"
            :on-change="(file) => handleAvatarSuccess(file, 1)"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForm.attachment" :src="ruleForm.attachment" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="footer">
      <el-button type="primary" size="medium" @click="submitForm('ruleForm')">确认</el-button>
      <el-button @click="back">取消</el-button>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
export default {
  name: 'addEnterprise',
  data() {
    return {
      ruleForm: {
        name: '',
        code: '',
        linkName: '',
        phone: '',
        address: '',
        isOpen: 1,
        attachment: '',
      },
      rules: {
        name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
        linkName: [{ required: true, message: '请输入企业联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入企业联系人电话', trigger: 'blur' }],
        isOpen: [{ required: true, message: '请选择是否开通域名', trigger: 'change' }],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    handleAvatarSuccess(file, type) {
      if (type == 1) {
        this.ruleForm.attachment = URL.createObjectURL(file.raw);
      }
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
    back() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.demo-ruleForm /deep/ .el-form-item__label {
  line-height: 14px;
}
.flex {
  display: flex;
  align-items: center;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 140px;
  display: flex;
  align-items: center;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 100%;
  display: block;
}
.footer {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 210px;
  border-top: 1px solid #e6e6e6;
}
</style>
